<template>
      <div>
          <table>
              <th>欢迎光临 vue 开发的收银系统水果店</th>
              <tr>
                 <strong>苹果 10￥ / 斤, 折扣 《8 折》</strong>
              </tr>
              <tr>
                  <span>请输入你要购买的斤数</span>
                  <input type="text" v-model="num">
              </tr>
              <tr><button @click="fn">结账买单</button></tr>
              <tr>结账单： 总价： {{money}}￥ 元 折后价： {{zhe}} ￥元 省了： {{shen}} ￥元</tr>
          </table>
      </div>
</template>

<script>
export default {
   data() {
    return {
       num: '',
       money: '',
       zhe: '',
       shen: ''
    };
   },
   methods: {
      fn() {
          this.money = this.num * 10,
          this.zhe = this.num * 10 * 0.8,
          this.shen = this.num * 10 - this.num * 10 * 0.8
      }
   }
}
</script>

<style scoped>
table th{
  text-align: center;
  transform: translateX(60px);
}

table {
  border-collapse: collapse;
  width: 700px;
}


table tr {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}
</style>